<style scoped>
.top_warp {
  display: flex;
  height: 50px;
  /* background-color: #282b33; */
  background-color: #323639;
  /* background-color: #5643AA; */
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-app-region: drag;
  /* background-image: linear-gradient(to right, #5643AA,#8E48AE, #CB4EB2); */
  /* background-image: url('../assets/img/top_bg.png'); */
}

.left_wrap {
  /* width: 200px; */
  width: 200px;
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  /* padding: 10px; */
  /* padding-top: 10px; */
  background-color: #fff;
  border-right: 1px solid rgb(219, 221, 226);
  overflow-y: auto;
  /* box-shadow: 1px 0px 2px 0 #0000001a; */
  /* -webkit-box-shadow: 1px 0px 6px 0 #0000001a; */
  z-index: 200;
  overflow-x: hidden;

  -webkit-box-shadow: 1px 0 4px 0 rgb(0 0 0 / 10%);
    box-shadow: 1px 0 4px 0 rgb(0 0 0 / 10%);
}
.right_wrap {
  background-color: #fff;
  position: relative;
  margin-left: 200px;
  top: 50px;
}
.logo {
  font-size: 16px;
  /* font-weight: 600; */
  color: #fff;
  /* margin-left: 20px; */
  width: 600px;
  display: flex;
  align-items: center;
}
.tool {
    margin-right: 20px;
    color: #fff;
    display: flex;
    align-items: center;
}
.top_menus{
    color:#707681;
    margin-left:15px;
    padding:5px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-app-region: no-drag;
}
.top_menus:hover{
    background-color: #D6D7D9;
}

.left_wrap li{
  list-style: none;
  font-size: 13px;
  height:38px;
  text-align: center;
  cursor: pointer;
  padding:5px 5px 5px 15px;
  display: flex;
  align-items: center;
}
.left_wrap li:hover{
  color:#5e7ce0;
}
.top_tools{
  display: flex;
  justify-content: center;
  margin-right:20px;
  color:#fff;
  height:26px;
  align-items: center;
}
.top_tools_menu{
  /* color:#707681; */
  color:#F1F1F1;
  margin-left:15px;
  padding:5px;
  border-radius: 2px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  font-size:16px;
  justify-content: center;
  height:18px;
}
.top_tools_menu:hover{
    /* background-color: #D6D7D9; */
    background-color: #191B1C;
}

.modules-sep-line-cf-header-sep-line {
    width: 1px;
    height:26px;
    border-right: 1px solid #53555c;
}

.logout{
  margin-left:20px;
  cursor: pointer;
}
</style>
<template>
  <div class="page_wrap">
    <div class="top_warp">
      <div style="display: flex;align-items: center;">
        <iconpark-icon name="application-one" style="color:#fff;font-size:22px;font-weight:600;margin-left:20px;padding-top:3px;"></iconpark-icon>
        <div style="margin-left:5px;color:#fff;display:flex;align-items: center;">
          <img src="../assets/img/logo.png" style="width:60px;margin-left:0px;" />
          <span style="margin-left:5px;font-size:10px;">管理控制台</span>
          <span style="margin-left:5px;">v1.0</span>
        </div>
      </div>
      <div class="top_tools">
        <!-- <span>OS：{{version.os}}_{{version.goarch}}</span> -->
        <span style="margin-left:10px;">
          <span style="background-color:#909399;padding:3px;color:#323639;">OS</span>
          <span style="padding:2px;border:1px solid #909399;margin-left:-4px;">{{version.os}}_{{version.goarch}}</span>
        </span>
        <span style="margin-left:10px;">
          <span style="background-color:#909399;padding:3px;color:#323639;">Kernel</span>
          <span style="padding:2px;border:1px solid #909399;margin-left:-4px;">{{version.kernel}}</span>
        </span>
        <span style="margin-left:10px;">
          <span style="background-color:#909399;padding:3px;color:#323639;">Version</span>
          <span style="padding:2px;border:1px solid #909399;margin-left:-4px;">{{version.iptables_version}}</span>
        </span>
        <span class="logout" @click="logout">注销登录</span>
      </div>
    </div>
    <div class="left_wrap">
      <template v-for="item in leftMenus" >
            <li  v-bind:key="item.id" @click="menuChange(item.id)" :style="item.checked?'color:#5e7ce0;background-color: #E1EAF8;border-left:2px solid #526ecc;':'padding-left:17px'">
                <iconpark-icon style="font-size:14px;" :name="item.icon"></iconpark-icon>
                <span style="margin-left:10px;">{{item.title}}</span>
            </li>
      </template>
    </div>
    <div class="right_wrap">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name:'home',
  data(){
    return{
      mix: false,
      leftMenus:[
        {
          id:0,
          title:'iptables流程图',
          icon:'home-950bfkej',
          checked:true,
          url:'/home/index'
        },
        {
          id:1,
          title:'filter表配置',
          icon:'filter',
          checked:false,
          url:'/home/filter'
        },
        {
          id:2,
          title:'nat表配置',
          icon:'cross-ring',
          checked:false,
          url:'/home/nat'
        },
        {
          id:3,
          title:'mangle表配置',
          icon:'sort-two',
          checked:false,
          url:'/home/mangle'
        },
        {
          id:4,
          title:'raw表配置',
          icon:'hourglass-null',
          checked:false,
          url:'/home/raw'
        },
        
      ],
      version:{}
    }
  },
  mounted(){
    this.loadVersion();
  },
  methods:{
    loadVersion(){
      this.$http.get('/api/version').then(({
            data: res
        }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.version = res.data;
        }).catch(() => {})
    },
    menuChange(id){
      var url = '';
      this.leftMenus.forEach(function(v){
        if(id==v.id){
          v.checked = true;
          url = v.url;
        }else{
          v.checked = false;
        }
      });
      this.$router.push(url);
    },
    logout(){
      this.$confirm('是否注销登录?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token');
        this.$router.push('/')
      }).catch(() => {
           
      });
    }
  }
}
</script>